var _ = {
    ui : {},
    d : {}
};
_.req = function(a, d, e, c) {
    if ( typeof window[a] == 'undefined') {
        window[a] = 0
        if (a == 'js') {
            $.getScript($config.staticUrl + b, c);
        } else {
            $.getStyle($config.staticUrl + b, c);
        }
    } else {
        c();
    }
};
_.isNull = function(a) {
    return a == null || a == undefined || a == '' || !a;
};

_.isEmpty = function(a) {

    return a == null || a == undefined || a == '' || a.length == 0;
}
_.newId = function() {
    var seek = '123456789zxcvbnmadfghjklqwertyuiopQWERTYUIOPASDFGHJKLZXCVBNM', max, ret = '', max = seek.length;

    for (var i = 0; i < 6; ++i)
        ret += seek.charAt(max * Math.random());
    return '_ui-' + ret;
};

_.ui.tooltip = function() {
    var t = $(this), text = t.attr('tooltip'), pos, dom = null, text;

    if (_.isNull(text))
        return;

    dom = $('<div class="_uiFlyLayer _uiTooltipLayer"><div class="_uiFlyOuter"><div class="_uiFlyContent"></div><div class="_uiFlyArrow"><div></div></div></div></div>').appendTo('body:first');

    pos = t.offset();

    dom.css({
        left : pos.left,
        top : pos.top
    }).find('._uiFlyContent:first').html(text);

    function hide() {
        dom.remove();
    }


    dom.addClass('active');

    t.bind('mouseout', hide);
}

_.ui.cardHover = function() {
    var t = $(this), pos, loading, pid = 0, atname = 'card-hover', idname = 'card-hover-id', idvalue = t.attr(idname), timeout = 200, dom = null;

    if (_.isNull($(t).attr(atname)))
        return;

    function hide() {
        dom.remove();
    }

    function reg() {
        pid = window.setTimeout(hide, timeout);
    }

    function kreg() {
        if (pid) {
            window.clearTimeout(pid);
            pid = 0;
        }
    }

    if (idvalue) {
        dom = $('#' + idvalue);
    } else {
        idvalue = _.newId();
    }

    if (null == dom || dom.length == 0) {
        dom = $('<div id="' + idvalue + '" class="_uiFlyLayer _uiHoverCardLayer"><div class="_uiFlyOuter"><div class="_uiFlyContent"></div><div class="_uiFlyArrow"><div></div></div></div></div>').appendTo('body:first');
        t.attr(idname, idvalue);
        t.bind('mouseout', reg).bind('mouseover', kreg);
        dom.bind('mouseout', reg).bind('mouseover', kreg);
    }

    pos = t.offset();
    dom.css({
        left : pos.left,
        top : pos.top
    });

    loading = '<div class="uiHoverCardLoading">Loading <span tooltip="ly-trinh" > coloboration 1 </span>... </div>';

    dom.find('._uiFlyContent:first').html(loading);
    dom.show();

};

_.ui.flyContext = function() {
    var t = $(this), pos, loading, pid = 0, atname = 'fly-context', idname = 'fly-context-id', idvalue = t.attr(idname), timeout = 20000, dom = null, width = height = 0, inner = false;

    if (_.isNull($(t).attr(atname)))
        return;

    function hide() {
        if (inner == false) {
            dom.remove();
            t.removeClass('active');
        }
    }

    function reg() {
        pid = window.setTimeout(hide, timeout);
    }

    function goIn() {
        inner = true;
    }

    function goOut() {
        inner = false;
    }

    function kreg() {
        if (pid) {
            window.clearTimeout(pid);
            pid = 0;
        }
    }

    if (idvalue) {
        dom = $('#' + idvalue);
    } else {
        idvalue = _.newId();
    }

    if (null == dom || dom.length == 0) {
        dom = $('<div id="' + idvalue + '" class="_uiFlyLayer _uiFlyContextLayer"><div class="_uiFlyOuter"><div class="_uiFlyContent"></div><div class="_uiFlyArrow"><div></div></div></div></div>').appendTo('body:first');
        t.attr(idname, idvalue);
        //t.bind('mouseout',goIn).bind('mouseover',goOut);
        dom.bind('mouseout', goOut).bind('mouseover', goIn);
        $(document).bind('click', hide);
    }

    pos = t.offset();
    width = t.width();
    height = t.height();

    console.log(width);
    dom.css({
        left : pos.left + width,
        top : pos.top + height
    });

    loading = '<div class="uiFlyContextLoading">Loading <span tooltip="ly-trinh" > coloboration 1 </span>... </div>';

    dom.find('._uiFlyContent:first').html(loading);
    dom.show();
    t.addClass('active');
};

_.ui.placeholder = function() {
    var t = $(this), text = t.attr('placeholder'), binded = t.attr('binded');

    if (text == null || text == '') {
        return;
    }

    if (t.val() == text) {
        t.val('');
    }

    if (_.isEmpty(binded)) {
        function changed() {
            if (t.val() == '') {
                t.val(text);
            }
        }


        t.attr('binded', 1);
        t.bind('change', changed);
    }
}
/**
 * auto complete should be lazy load and ready for multiple instance if you want to support multiple later.
 */
_.ui.autocomplete = function() {

    var t = $(this), dom, content, ul, content = null, pos = {
    }, height = {
    }, atname = "autocomplete-id", idname = "autocomplete-id", idkey = t.attr(atname), data, url = '/v4/fox/search', html;
    /**
     * callback function from remote content.
     */
    function cb() {

    }

    function hide() {
        dom.hide();
    }

    function update(json) {
        content.html(json.html);
    }

    function request() {
        data = t.val();
        $.getJSON(url, {
            q : data
        }, update);
    }

    function loading() {
        content.html('<div class="_uiLoading"> loading ... </div>');
    }

    if (idkey) {
        dom = $('#' + idkey);
    } else {
        idkey = _.newId();
    }
    if (dom == null || dom.length == 0) {
        dom = $('<div class="_uiFlyLayer _uiFlyAc"><div class="_uiFlyOuter"><div class="_uiFlyContent"></div></div></div>');
        dom.attr('id', idkey).appendTo('body:first');
        t.attr(idname, idkey);
    }

    content = dom.find('._uiFlyContent:first');

    dom.show();

    pos = t.offset();

    height = t.height();

    dom.css({
        left : pos.left,
        top : pos.top + height
    });

    t.bind('change', request).bind('keyup', request);
}

_.ui.fbox = function(opt) {
    var dom, ele, pos, size, content, loading = '<div class="_uiFboxLoading">Loading ...</div>', html = '<div class="_uiFixLayer"><div class="_uiFboxLayer"><div class="_uiFboxOuter"><div class="_uiFboxContent"></div></div></div></div>';

    dom = $(html).appendTo('body:first');

    content = dom.find('._uiFboxContent:first');

    content.html(loading);
    url = 'http://namnv.younetco.com/v4/fox/admin/appearance/menu/create';

    function update(response) {
        json = $.parseJSON(response);
        content.html(json.html);
    }


    $.post(opt.url, opt.data, update);
}

_.ui.thbox = function() {
    var dom, ele, pos, size, content, loading = '<div class="_uiFboxLoading">Loading ...</div>', html = '<div class="_uiFixLayer"><div class="_uiTheaterLayer"><div class="_uiTheaterOuter"><div class="_uiTheaterContent"></div></div></div></div>';

    dom = $(html).appendTo('body:first');

    content = dom.find('._uiTheaterContent:first');

    content.html(loading);
    url = 'http://namnv.younetco.com/v4/test/thbox.html';

    function update(html) {
        content.html(html);
    }


    $.get(url, {
    }, update);
};

$(document).ready(function() {
    $(document).on('mouseover', '[tooltip]', _.ui.tooltip);
    $(document).on('mouseover', '[card-hover]', _.ui.cardHover);
    $(document).on('click', '[fly-context]', _.ui.flyContext);
    $(document).on('click', '[placeholder]', _.ui.placeholder);
    //$(document).on('focus', '[autocomplete]', _.ui.autocomplete);
});

_.d.cancel = function(url) {
    if (_.isEmpty(url)) {
        url = window.location.href;
    }
    // process url from slag.
    var ar = url.split('/');
    ar.pop();
    url = ar.join('/');

    window.location.href = url;
}
